import styled from "styled-components";

export const EventWrap = styled.div`
  .json-song {
    display: flex;
    padding: 10px;
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
    margin: 4px 0 5px;
    .json-img {
      position: relative;
      .json-msk {
        position: absolute;
        top: 0;
        left: 0;
        width: 40px;
        height: 40px;
        z-index: 200;
        display: block;
        opacity: 0.8;
        background-position: -100px -70px;
        :hover {
          opacity: 1;
        }
      }
      img {
        width: 40px;
        height: 40px;
        display: inline-block;
      }
    }

    .json-song-text {
      width: 479px;
      margin-left: 10px;
      .json-songname {
        font-size: 14px;
        line-height: 22px;
      }
      .json-artists {
        font-size: 12px;
        line-height: 22px;
      }
      .json-category {
        margin-right: 6px;
        padding: 0 2px 0 3px;
        border: 1px solid #e03f40;
        line-height: 16px;
        color: #e03f40;
      }
      .artist-name {
        line-height: 40px;
        font-size: 14px;
      }
    }
  }
  .json-song-img-box {
    float: left;
    .json-song-div {
      margin-left: 5px;
      margin-top: 5px;
      cursor: url(${require("@/assets/img/bitbug_favicon.ico").default}), auto;
      :nth-child(3n-2) {
        clear: left;
      }
    }
  }
  .json-fdpic {
    margin: 4px 0 5px;
    .json-zfgd {
      display: flex;
      background-color: #f5f5f5;
      height: 60px;
      padding: 10px;
      .json-img {
        position: relative;
        .json-msk {
          position: absolute;
          top: 0;
          left: 0;
          width: 40px;
          height: 40px;
          z-index: 200;
          display: block;
          opacity: 0;
          background-position: -100px -70px;
          :hover {
            opacity: 1;
          }
        }
        img {
          width: 40px;
          height: 40px;
          display: inline-block;
        }
      }
      .zfgd-span {
        display: block;
        margin-left: 8px;
        margin-bottom: 4px;
        .red-box-a {
          font-size: 14px;
          color: #333;
        }
        .red-box {
          padding: 1px 3px;
          border: 1px solid #e03f40;
          color: #e03f40;
          margin-right: 4px;
        }
      }
    }
    .empty-detail {
      padding: 10px;
      margin: 4px 0 5px;
      background: #f5f5f5;
      text-align: center;
    }
    .json-fdpic-box {
      .longPic {
        ::before {
          content: "";
          position: absolute;
          width: 35px;
          height: 17px;
          right: 6px;
          bottom: 6px;
          background: url(${require("@/assets/img/frd_dyn_sprite.png").default})
            no-repeat -160px -370px;
        }
      }
      .curbig {
        cursor: url(${require("@/assets/img/bitbug_favicon.ico").default}), auto;
      }
      .json-img-box {
        position: relative;
        height: auto;
        width: auto;
        float: left;
        img {
          display: block;
          float: left;
          margin: 4px 0 0 4px;
          :nth-child(3n-2) {
            clear: left;
          }
        }
        .pic-high {
          min-width: 170px;
          max-height: 338px;
          height: auto;
        }
        .pic-wide {
          width: auto;
          min-height: 170px;
          max-width: 338px;
        }
      }
    }
    .json-video-box {
      width: 338px;
      height: 189px;
      position: relative;
      .f-img {
        width: 100%;
        height: 100%;
      }
      .json-video-msk {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.1);
        color: #fff;
        cursor: pointer;
        z-index: 10;
        .json-video-play {
          width: 40px;
          height: 40px;
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          opacity: 0.8;
          background-position: 0 -510px;
          :hover {
            opacity: 1;
          }
        }
        .json-video-title {
          /* text-align:center; */
          line-height: 15px;
          padding: 10px;
          background: url(${require("@/assets/img/frd_cover_mask.png").default})
            0 -184px repeat-x;
          height: 100px;
          .json-video-title-box {
            max-height: 30px;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            .json-video-title-nickname {
              color: #fff;
              opacity: 0.5;
              em {
                margin: 0 2px;
              }
            }
            .json-mv-icon {
              margin-right: 4px;
              width: 21px;
              height: 12px;
              background-position: 0 -210px;
              display: inline-block;
            }
          }
        }
        .json-video-bottom-box {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          padding: 33px 10px 10px;
          height: 53px;
          line-height: 10px;
          font-size: 14px;
          background: url(${require("@/assets/img/frd_cover_mask.png").default})
            0 -285px repeat-x;
          display: flex;
          justify-content: space-between;
          span {
            .video-icon-play {
              width: 8px;
              height: 10px;
              background-position: -50px -510px;
              display: inline-block;
              margin-right: 5px;
            }
            .video-icon-sj {
              width: 9px;
              height: 10px;
              background-position: -50px -530px;
              display: inline-block;
              margin-right: 5px;
            }
          }
        }
      }
    }
  }
  .json-event {
    padding: 10px;
    margin: 4px 0 5px 0;
    background-color: #f5f5f5;
    .json-event-text {
      .json-text {
        line-height: 24px;
        .json-evnet-user-name {
          color: #0c73c2;
        }
      }
      .json-zf-box {
        .json-song {
          background-color: #fff;
        }
      }
    }
  }
  .user-img-box {
    margin: 30px 0;
    .user-imga {
      width: 30px;
      height: 30px;
      margin-right: 13px;
    }
  }
`;
